<!-- 
	使用方式
	更多样式请查看uview
	<ct-tabs :list="list" :isScroll="isScroll" @change="change"></ct-tabs>
 -->

<template>
	<view class="container">
		<u-tabs :list="list" :bg-color="bgColor" :name="cateName" :count="cateCount" :is-scroll="isScroll" :show-bar="showBar" :current="current" :height="height" :bar-height="barHeight" :bar-width="barWidth" :active-color="activeColor" :inactive-color="inactiveColor" :font-size="fontSize" @change="change"></u-tabs>
	</view>
</template>

<script>
	export default {
		name:'',
		data() {
			return {
				current: 0, //默认选择的项
			}
		},
		props:{
			//项
			list:{
				type:Array,
				default:function() {
					return []
				}
			},
			bgColor:{
				type:String,
				default: '#ffffff'
			},
			//是否可以左右滑动
			isScroll:{
				type:Boolean,
				default: false
			},
			//是否显示底部滑块
			showBar:{
				type:Boolean,
				default: true
			},
			//自定义name属性
			cateName:{
				type:String,
				default: ''
			},
			// 自定义右上角数字属性
			cateCount:{
				type:String,
				default: ''
			},
			// 导航的高（单位rpx）
			height:{
				type: Number,
				default: 80
			},
			// 滑块高度（单位rpx）
			barHeight:{
				type: Number,
				default: 6
			},
			// 滑块宽度（单位rpx）
			barWidth:{
				type: Number,
				default: 40
			},
			// 激活的颜色
			activeColor:{
				type:String,
				default: '#2979ff'
			},
			// 非激活的颜色
			inactiveColor:{
				type:String,
				default: '#606266'
			},
			// tabs文字大小
			fontSize:{
				type: Number,
				default: 30
			},
		},
		computed:{},
		watch:{
			current: {
				handler(newValue, oldValue) {
					this.$emit('change', newValue)
				},
				immediate: true,
			}
		},
		onLoad() {
			
		},
		methods:{
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style>
</style>
